<template>
  <div class="container">
    <div class="load">
      <Load></Load>
    </div>
    <div class="form">

      <div class="text">
        挑动梦想 <span style="display: inline-block;width: 10px"></span> 战出未来
      </div>
      <div class="login" v-if="status=='登陆'">
        <Input :style="style" name="邮箱">
          <template v-slot:input>
            <input required="" type="text" class="input" v-model="signForm.account">
          </template>
        </Input>
        <Input :style="style" name="密码">
          <template v-slot:input>
            <input required="" type="password" class="input" v-model="signForm.pwd">
          </template>
        </Input>
        <div class="options">
          <span @click="status='注册'">新用户注册</span>
          <span @click="status='忘记'">忘记密码</span>
        </div>
        <button @click="login"> 登陆</button>
      </div>

      <div class="sign" v-if='status=="注册"'>
        <Input :style="style" name="邮箱">
          <template v-slot:input>
            <input required="" type="text" class="input" v-model="signForm.account">
          </template>
        </Input>
        <Input :style="style" name="密码">
          <template v-slot:input>
            <input required="" type="text" class="input" v-model="signForm.pwd">
          </template>
        </Input>
        <a-radio-group v-model:value="signForm.authority" name="radioGroup" class="select"
                       style="width: 80%;display: flex;justify-content: flex-start;margin:10px auto;">
          <a-radio value="老师">老师</a-radio>
          <a-radio value="学生">学生</a-radio>
        </a-radio-group>
        <div class="space">
          <a-input v-model:value="signForm.code" autofocus placeholder="验证码" size="large" style="width:auto;"/>
          <button style="margin:0 10px;width:70px" @click="getCode"> {{ btnText }}</button>
        </div>
        <button @click="signUp"> 注册</button>


      </div>
      <div class="sign" v-if='status=="忘记"'>
        <Input :style="style" name="邮箱">
          <template v-slot:input>
            <input required="" type="text" class="input" v-model="signForm.account">
          </template>
        </Input>
        <Input :style="style" name="密码">
          <template v-slot:input>
            <input required="" type="text" class="input" v-model="signForm.pwd">
          </template>
        </Input>
        <div class="space">
          <a-input v-model:value="signForm.code" autofocus placeholder="验证码" size="large" style="width:auto;"/>
          <button style="margin:0 10px;width:70px" @click="getCode"> {{ btnText }}</button>
        </div>
        <button @click="forgetPwd"> 提交</button>
      </div>


    </div>

  </div>
</template>

<script setup>
import {reactive, ref, inject} from "vue";
import {useRouter} from "vue-router";
import Input from "@/components/Input"
import Load from "@/components/load"
import {message} from 'ant-design-vue';

const style = reactive({
  width: '80%',
  height: "50px",
  margin: '10px auto'
})
const status = ref("登陆")
const router = useRouter()
const axios = inject("$axios")
const signForm = reactive({
  account: "",
  pwd: "",
  authority: "",
  code: '',
})
const btnText = ref("发送")
const emailValid = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
const login = () => {
  if (emailValid.test(signForm.account) && signForm.pwd != '') {
    axios.post("login", signForm).then(res => {
      let data = res.data
      if (data.code == 0) {
        message.error(data.msg);
      } else {
        message.success("登陆成功", .5, () => {
          router.replace("/")
        })
      }

    }).catch(err => {
      message.error("服务器异常");
    })
  } else {
    message.error("请完整填写信息");

  }

}
const getCode = () => {

  if(btnText.value=="已发送"){
        message.error("操作频繁");
        setTimeout(()=>{
          btnText.value="发送"
        },60000)
    return

  }

   if (emailValid.test(signForm.account)) {
    btnText.value = "已发送"
    axios.get("login/code?account=" + signForm.account).then(res => {
      message.success(res.data.data)
    }).catch(err => {
      message.error("服务器异常");
    })
  } else {
    message.error("请填写邮箱");
  }

}
const valid = () => {
  for (let i in signForm) {
    if (signForm[i] == '') return false
  }
  return true
}
const signUp = () => {
  if (valid() && emailValid.test(signForm.account)) {
    axios.post("login/sign", signForm).then(res => {
      let data = res.data
      if (data.code == 0) {
        message.error(data.msg);
      } else {
        message.success("登陆成功", .5, () => {
          router.replace("/")
        })
      }

    }).catch(err => {
      message.error("服务器异常");
    })
  } else {
    message.error("请完整填写信息");

  }

}
const forgetPwd = () => {
  signForm.authority="学生"
  if (valid() && emailValid.test(signForm.account)) {
    axios.post("login/forget", signForm).then(res => {
      let data = res.data
      if (data.code == 0) {
        message.error(data.msg);
      } else {
        message.success("登陆成功", .5, () => {
          router.replace("/")
        })
      }

    }).catch(err => {
      message.error("服务器异常");
    })
  } else {
    message.error("请正确填写信息");

  }

}

</script>

<style scoped lang="less">

button {
  width: 82%;
  height: 40px;
  background-color: #409EFF;
  border: none;
  border-radius: 10px;
  line-height: 40px;
  color: #ffffff;
  margin-top: 20px;
}

input {
  letter-spacing: 1px;
}




.space {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 10px auto;
}



.options {
  display: flex;
  justify-content: space-between;
  color: #409EFF;
  width: 80%;
  margin: 10px auto;
}

.text {
  margin-top: 20px;
  letter-spacing: 2px;
  color: #409EFF;
  font-weight: 700;
  font-size: 20px;
}

/*移动设备*/
@media screen and (max-width: 480px) {


  .login, .sign {
    height: 300px;
    margin-top: 30px;
  }

  /*CSS代码*/
  .container {
    height: 100vh;
    background-color: #409EFF;
    border: 1px transparent solid;
    width: 100%;

    .form {
      background-color: #ffffff;
      width: 70%;
      margin: 10px auto;
      position: relative;
      top: 30px;
      padding: 10px;
      border-radius: 10px;
      padding-bottom: 10px;


    }

  }
}

/*PC*/
@media screen and(min-width: 480px) {
  .container {
    width: 100%;
    height: 100vh;
    background-image: url("@/assets/login.jpg");
    background-size: 100% 100%;
    position: relative;
    .load{
      display: none;
    }
    .form {
      top:20vh;
      background-color: rgb(255,255,255);
      padding: 10px;
      border-radius: 10px;
      position: absolute;
      right: 10vw;
      padding-bottom: 20px;
      width: 30vw;
      color: #ffffff;


    }
  }
}

</style>